function drawRing(opts) {
	var _opts = {
			partent: document.body,
			width: 100,
			radius: 45,
			arc: 5,
			percent: 100,
			color: ['#ccc', '#042b61'],
			textColor: '#000',
			textSize: '12px',
			animated: false
		},
		k;
	for(k in opts) {
		_opts[k] = opts[k];
	};
	var parent = _opts.parent,
		width = _opts.width,
		radius = _opts.radius,
		arc = _opts.arc,
		percent = _opts.percent,
		color = _opts.color,
		textColor = _opts.textColor,
		textSize = _opts.textSize,
		animated = _opts.animated,
		c = document.createElement('canvas'),
		ctx = null,
		raf = null,
		x = 0;

	//初始化动画变量
	var lastTime = 0,
		prefixes = ['webkit', 'ms', 'moz', 'o'];
	for(var i = 0; i < prefixes.length && !window.requestAnimationFrame; ++i) {
		window.requestAnimationFrame = window[prefixes[x] + 'requestAnimationFrame'];
		window.cancelAnimationFrame =
			window[prefixes[x] + 'CancelAnimationFrame'] || window[prefixes[x] + 'CancelRequestAnimationFrame'];
	};
	if(!window.requestAnimationFrame) {
		window.requestAnimationFrame = function(callback, element) {
			var currentTime = new Date().getTime(),
				timeToCall = Math.max(0, 16 - (currentTime - lastTime)),
				id = window.setTimeout(function() {
					callback(currentTime + timeToCall);
				}, timeToCall);
			lastTime = currentTime + timeToCall;
			return id;
		};
	};
	if(!window.cancelAnimationFrame) {
		window.cancelAnimationFrame = function(id) {
			clearTimeout(id);
		}
	};
	parent.appendChild(c);
	ctx = c.getContext('2d');
	ctx.canvas.width = width;
	ctx.canvas.height = width;
	//清空画布
	function clearFill() {
		ctx.clearRect(0, 0, width, width);
	};
	//绘制背景圆环
	function fillBg() {
		ctx.beginPath();
		ctx.lineWidth = arc;
		ctx.strokeStyle = color[0];
		ctx.arc(width / 2, width / 2, radius, 0, 2 * Math.PI);
		ctx.stroke();
	};
	//绘制进度圆环
	function fillArc(x) {
		ctx.beginPath();
		ctx.lineWidth = arc;
		ctx.strokeStyle = color[1];
		ctx.arc(width / 2, width / 2, radius, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
		ctx.stroke();
	}
	//进度数值显示
	function fillText(x) {
		ctx.font = textSize + ' Arial';
		ctx.fillStyle = textColor;
		ctx.textBaseline = 'middle';
		ctx.textAlign = 'center';
		ctx.fillText(x.toFixed(0) + '%', width / 2, width / 2);
	}
	//整体绘制环
	function draw(x) {
		fillBg();
		fillArc(x);
		fillText(x);
	};

	if(!animated) {
		return draw(percent);
	};

	draw(x);
	! function animate() {
		x++;
		raf = requestAnimationFrame(function() {
			animate();
		});
		clearFill();
		draw(x);
		if(x >= percent) {
			cancelAnimationFrame(raf);
			return;
		}
	}();
};

//扩展自定义jQuery方法
(function($){
	$.extend({
		popShow: function(src) {//src:弹出层内容路径
			if (src) {
				var obj = $('<div class="popbox"><iframe allowtransparency="true" frameborder="0" marginheight="0" scrolling="no" marginwidth="0" width="100%" height="100%" src="' + src + '"></iframe></div>');
				var zzc = $('<div class="zzc"></div>');
				var popPanel = $("body",window.top.document);
				if(!!window.top.frames["mainFrame"]){
					popPanel = $("#mainFrame",window.top.document).contents().find("body");
				}
                if(!popPanel.find(".popbox").length>0){
                    $(popPanel).append(obj, zzc);
                    obj.animate({
                        right: 0
                    }, 500);
                }
			}
		},
		popHide: function() {
			var topBody = $("body",window.top.document);
			if(!!window.top.frames["mainFrame"]){
					topBody = $("#mainFrame",window.top.document).contents().find("body");
				}
			if (topBody.find(".popbox").length > 0) {
				topBody.find(".popbox").animate({
					right: -674
				}, 500, function() {
					topBody.find(".popbox,.zzc").remove();
				})
			}
		},
		tipShow:function(type,msg){//type：1=成功 2=失败，msg：提示文本
			if(msg&&type){
				var tip=$('<div class="tip">'+msg+'</div>');
				switch(type){
					case 1:
						tip.addClass("success");
					case 2:
						tip.addClass("fail");
				}
				top.$("body").append(tip);
				tip.fadeIn(500,function(){
					setTimeout(function(){
						tip.fadeOut(500,function(){
							tip.remove()
						});
					},3000)
				});
			}
		},
		/*confirmShow:function(txt,cb,cntHandle){
			if($.type(txt)=="string"&&$.type(cb)=="function"){
				var confirm=$('<div class="confirm"><a class="close"></a><div class="txt">'+txt+'</div><div class="bt"><a class="cancel">取消</a><a class="pass">确定</a></div></div>');
				var zzc = $('<div class="zzc"></div>');
				$("body").append(confirm,zzc);
				cntHandle();
				confirm.find(".pass").on("click",cb);
				confirm.find(".close-pop,.cancel,.pass").on("click",function(){
					$.confirmHide();
				})
			}
		},*/
		
		confirmShow:function(opt){
			var params = $.extend({
					headerTxt : "这是一个confirm",
					contentDiv : "<div>TEXT</div>",
					cntHandle : $.noop()
				},opt||{});
			var confirmPanel = $('<div class="confirm">'+
								 '<div class="pop-top pos-re of-h">'+
								 '<h2 class="pop-title"><a>'+params.headerTxt+'</a></h2><a class="close-pop com_icon"></a></div>'+
								 '<div class="txt">'+params.contentDiv+'</div>'+
								 '<div class="pop-foot bt b-b-r"><a class="cancel">取消</a><a class="pass">确定</a></div>'+
								 '</div><script type="text/javascript">$('+params.cntHandle+')</script>');
			var zzc = $('<div class="zzc"></div>');
			$("body").append(confirmPanel,zzc);
			confirmPanel.find(".close-pop,.cancel").on("click",function(){
				$.confirmHide();
			})
		},
		
		confirmHide:function(){
			top.$(".confirm,.zzc").remove();
		}

	});
	
	$.fn.extend({
		outerTab : function(obj){
			var params = $.extend({
				tabContentPanel : $("body")
			},obj || {});
			$(".tab-list",$(this)).each(function(index){
				$(this).on("click",function(){
					$(this).addClass("on").siblings().removeClass("on");
					var tabContentItem = $('<div class="tab-content-item"></div>'),
						tabContentPanel = params.tabContentPanel,
						type = $(this).attr("data-type"),
						src = $(this).attr("data-src"),
						iframe_ele = $("<iframe id='iframe"+type+"' width = '100%' height = '100%' frameborder = '0' allowTransparency = 'true' />");
					if(!!tabContentPanel.find("[data-content-type="+type+"]")&&tabContentPanel.find("[data-content-type="+type+"]").length>0){
						tabContentPanel.find("[data-content-type="+type+"]").show().siblings().hide();
					}else{
						tabContentPanel.find(".tab-content-item").hide();
						tabContentItem.height("100%").attr("data-content-type",type)
							.append(iframe_ele.attr("src",src))
							.appendTo(tabContentPanel);
					}
				})
			})
		}
	})
})(jQuery)


